<template>
  <div class="page">
    <div class="title">
      点击查看问卷结果
    </div>
    <div class="content">
      <el-card class="box-card" v-for="item in papers" :key="item.id" @click.native="showDetail(item)">
        {{ item.title }}
      </el-card>
    </div>

    <el-pagination class="pagination" @current-change="pageNoChange" :current-page.sync="page" :page-size="10"
      layout="total, prev, pager, next" :total="total">
    </el-pagination>

    <div v-if="detailVisible" class="detail">
      <el-button @click="detailVisible = false">
        返回
      </el-button>
      <el-table :data="tableData" style="width: 100%;" height="calc(100% - 40px)">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column v-for="item in headers" :key="item" :prop="item" :label="item"
          :width="item === '姓名' ? 80 : null">
          <template slot-scope="scope">
            {{ scope.row[item] }}
          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pagination" @current-change="pageNoChange2" :current-page.sync="page2" :page-size="10"
        layout="total, prev, pager, next" :total="total2">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { getPapers, queryallpaper } from '@/api/official/official'
export default {
  name: 'InternetHospitalMangePapers',

  data() {
    return {
      papers: [],
      page: 1,
      total: 0,
      detailVisible: false,
      tableData: [],
      page2: 1,
      total2: 0,
      headers: [],
      row: {}
    };
  },

  mounted() {
    this.getPapers()
  },

  methods: {
    getPapers() {
      getPapers({ page: this.page }).then(res => {
        this.papers = res.content
        this.total = res.totalElements;
      })
    },
    pageNoChange(page) {
      this.page = page;
      this.getPapers();
    },
    pageNoChange2(page) {
      this.page2 = page;
      this.queryallpaper();
    },
    showDetail(row) {
      this.row = row
      this.page2 = 1;
      this.detailVisible = true;
      queryallpaper({ page: this.page2, paperid: row.paperId }).then(res => {
        this.headers = Object.keys(res.content[0]);
        const index = this.headers.indexOf('姓名');
        if (index > -1) {
          const name = this.headers.splice(index, 1)[0]; // 移除 '姓名'
          this.headers.unshift(name); // 将 '姓名' 插入到数组第一位
        }

        this.tableData = res.content;
        this.total2 = res.total;
      })
    },
    queryallpaper() {
      queryallpaper({ page: this.page2, paperid: this.row.paperId }).then(res => {
        this.headers = Object.keys(res.content[0]);
        const index = this.headers.indexOf('姓名');
        if (index > -1) {
          const name = this.headers.splice(index, 1)[0]; // 移除 '姓名'
          this.headers.unshift(name); // 将 '姓名' 插入到数组第一位
        }

        this.tableData = res.content;
        this.total2 = res.total;
      })
    }
  },
};
</script>

<style scoped>
.page {
  min-height: calc(100vh - 84px);
  padding: 24px;
  position: relative
}

.title {
  font-size: 24px;
  margin-bottom: 24px;
}

.box-card {
  cursor: pointer;
  margin-bottom: 24px;
}

.content {
  height: calc(100vh - 226px);
  min-height: 500px;
  overflow: auto;
}

.pagination {}

.detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  padding: 24px;
  background-color: #FFF;
}
</style>